<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>管理员登录</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .bj{
      width: 100%;
      min-width: 1024px;
      height: 750px;
      background-image: url(./img/it3.gif);
    }
    .logo img{
      width: 200px;
      margin: 50px 0 20px 150px;
    }
    .center{
      width: 300px;
      background-color: rgba(0,0,0,0.7);
      margin:  50px auto;
      padding: 20px;
      border-radius: 10px;
      color: #fff;
    }
    input{
      width: 210px;
      height: 30px;
      margin:20px 0 20px 0;
      border: 0;
      border-radius: 5px;
    }
    .back{
      text-align: right;
    }
    .back a{
      color: #fff;
      text-decoration: none;
      font-size: 12px;
    }
    button{
      width: 100%;
      height: 30px;
      border: 0;
      font-size: 20px;
      background-color: #0aa1ed;
    border-radius: 5px;
    color: #fff;
    margin-top: 20px ;
    }
  </style>
</head>
<body >
  <div class="bj">
    <div class="logo"><a href="index.html"><img src="./img/logo.png"></a></div>
    <div class="center">
  <h1>管理员登录</h1>
  <hr>
  <label>*用户名：</label>
  <input type="text" placeholder="请输入用户名" id="aname"><br>
  <label>*密&#x3000;码：</label>
  <input type="password" placeholder="请输入密码" id="apwd"><br>
  <p class="back"><a href="./index.html">不是管理员</a></p>
  <button id="btn">登录</button>
  </div>
</div>
  <script>
     //1.获取所有需要的元素（id）
  var aname = document.getElementById('aname');
  var apwd = document.getElementById('apwd');
  var btn = document.getElementById('btn');
  //2.写ajax函数
  function ajax(a,b){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
        if(xhr.status>=200&&xhr.status<300){
          var result = JSON.parse(xhr.responseText);
          //console.log(result);
          //result.code == 1 登录正确
          if(result.code==1){
            alert("登陆成功");
            //登录成功后jump里面加入一个可以跳转到列表的超链接
            location.href = "http://127.0.0.1:8080/list.html";

          }else {
            alert("登陆失败");
          }
        }else {
          console.log('数据返回错误');
        }
      }
    }
    xhr.open('POST','/admin/login',true);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send(`aname=${a}&apwd=${b}`);
  }
  //3.点击按钮接收用户输入内容并传递给ajax函数
  btn.onclick = function(){
    //先接收参数
    var anameval = aname.value.trim();
    var apwdval = apwd.value.trim();
    //判断是否有空值
    console.log(anameval,apwdval);
    if(anameval!=''&&apwdval!=''){
      //在给ajax传参
      ajax(anameval,apwdval);
    }else {
      alert('用户名和密码不能为空');
    }
  }
  </script>
</body>
</html>